<template>
	<view class="content">
		<view>
			<!-- <el-form></el-form> -->
			<!-- 头像区域 -->
			<view class="avatarContent">
				<image class="user_bg" :src="avatar"></image>
				<view class="avatarBox">
					<view class="user_info">
						<image class="avatar" :src="avatar"></image>
						<view class="username">{{username}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
	
		},
		data() {
			return {
				//头像
				avatar: '',
				//名称
				username: '',
				//用户信息
				userInfo: [],
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.avatar = this.userInfo.avatarUrl;
			this.username = this.userInfo.nickName;
		},
		methods: {
	
		}
	}
</script>

<style>
	.avatarContent {
		width: 100%;
		height: 50vh;
		overflow: hidden;
		position: relative;
	}
	
	.user_bg {
		position: absolute;
		width: 100%;
		height: 50vh;
		filter: blur(6rpx);
	}
	
	.avatarBox {
		position: relative;
		width: 100%;
		height: 50vh;
	}
	
	.user_info {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 20%;
		text-align: center;
	}
	
	.avatar {
		width: 220rpx;
		height: 220rpx;
		border-radius: 50%;
	}
	
	.username {
		color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		width: 100%;
	}
</style>
